<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .cl::after {
            content: ".";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .wrapAll {
            width: 1226px;
            margin: 50px auto;
            /* background-color: grey; */
        }

        .wrapAll .left {
            width: 400px;
            float: left;
        }

        .wrapAll .left .showGoods {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .wrapAll .left .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            cursor: all-scroll;
            display: none;
        }

        .wrapAll .left img {
            width: 100%;
            height: 100%;
        }

        .wrapAll .left .showList {
            width: 100%;
            display: flex;
            margin-top: 10px;
        }

        .wrapAll .left .showList li {
            flex: 1;
            border: 2px solid transparent;
        }

        .wrapAll .left .showList .active {
            border-color: red;
        }

        .wrapAll .left .showList li+li {
            margin-left: 10px;
        }

        .wrapAll .right {
            width: -webkit-calc(100% - 400px - 20px);
            min-height: 500px;
            float: right;
            /* background-color: pink; */
            position: relative;
        }

        .scaleGoods {
            position: absolute;
            width: 500px;
            height: 500px;
            /* background-color: rgba(125, 255, 255, 0.5); */
            overflow: hidden;
            display: none;
        }

        .scaleGoods img {
            width: 1000px;
            height: 1000px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="wrapAll cl">
        <div class="left">
            <div class="showGoods">
                <img class="smallImg" src="../images/girlsmall1.jpg" alt="">
                <div class="shadow"></div>
            </div>
            <ul class="showList">
                <li class="active"><img src="../images/girlsmall1.jpg" alt=""></li>
                <li><img src="../images/girlsmall2.jpg" alt=""></li>
                <li><img src="../images/girlsmall3.jpg" alt=""></li>
                <li><img src="../images/girlsmall4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="right">
            <div class="scaleGoods">
                <img class="bigImg" src="../images/girlbig1.jpg" alt="">
            </div>
        </div>
    </div>

</body>
<script>
    var shadow = document.getElementsByClassName("shadow")[0];
    var showGoods = document.getElementsByClassName("showGoods")[0];
    var bigImg = document.getElementsByClassName("bigImg")[0];
    var smallImg = document.getElementsByClassName("smallImg")[0];
    var scaleGoods = document.getElementsByClassName("scaleGoods")[0];
    var showList = document.getElementsByClassName("showList")[0];
    var liList = showList.querySelectorAll(".showList li");

    var maxLeft;
    var maxTop;

    var scale;

    showGoods.onmouseenter = function () {
        shadow.style.display = "block";
        scaleGoods.style.display = "block";

        maxLeft = showGoods.clientWidth - shadow.clientWidth;
        maxTop = showGoods.clientHeight - shadow.clientHeight;

        scale = showGoods.clientWidth / shadow.clientWidth;
    }

    showGoods.onmouseleave = function () {
        shadow.style.display = "none";
        scaleGoods.style.display = "none";
    }
	

    showGoods.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX - showGoods.offsetLeft - shadow.clientWidth / 2;
        var y = e.pageY - showGoods.offsetTop - shadow.clientHeight / 2;

        // 判断是否超出范围
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > maxLeft) x = maxLeft;
        if (y > maxTop) y = maxTop;

        shadow.style.left = x + "px";
        shadow.style.top = y + "px";

        bigImg.style.left = x * -scale + "px";
        bigImg.style.top = y * -scale + "px";
    }

    var smallImgList = ["../images/girlsmall1.jpg", "../images/girlsmall2.jpg", "../images/girlsmall3.jpg", "../images/girlsmall4.jpg"];
    var bigImgList = ["../images/girlbig1.jpg", "../images/girlbig2.jpg", "../images/girlbig3.jpg", "../images/girlbig4.jpg"];
    for (let i = 0; i < liList.length; i++) {
        let li = liList[i];
        li.onmousemove = function () {
            for (var j = 0; j < liList.length; j++) {
                liList[j].className = "";
            }
            this.className = "active";

            smallImg.src = smallImgList[i];
            bigImg.src = bigImgList[i];

        }
    }
</script>

</html>